<template>
  <div class="p-2">
    <!--查询区域-->
    <div class="jeecg-basic-table-form-container">
      <a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-row :gutter="24">
          <a-col :lg="6">
            <a-form-item name="projectCode">
              <template #label><span title="项目筛选">项目筛选</span></template>
              <a-input placeholder="请输入项目筛选内容，支持模糊搜索" v-model:value="queryParam.projectCode" />
            </a-form-item>
          </a-col>
          <a-col :lg="6">
            <a-form-item name="systemName">
              <template #label><span title="系统筛选">系统筛选</span></template>
              <a-input placeholder="请输入系统筛选，支持模糊搜索" v-model:value="queryParam.systemName" />
            </a-form-item>
          </a-col>
          <template v-if="toggleSearchStatus">
            <a-col :lg="6">
              <a-form-item name="batchName">
                <template #label><span title="项目名">批次筛选</span></template>
                <a-input placeholder="请输入批次筛选，支持模糊搜索" v-model:value="queryParam.batchName" />
              </a-form-item>
            </a-col>
            <a-col :lg="6">
              <a-form-item>
                <template #label><span title="创建时间">创建时间</span></template>
                <div style="display: flex">
                  <a-form-item name="createTime_begin" style="margin-bottom: 0">
                    <a-date-picker
                      showTime
                      value-format="YYYY-MM-DD HH:mm:ss"
                      placeholder="请选择开始时间"
                      v-model:value="queryParam.createTime_begin"
                      class="query-group-cust"
                    />
                  </a-form-item>
                  <span class="query-group-split-cust">~</span>
                  <a-form-item name="createTime_end" style="margin-bottom: 0">
                    <a-date-picker
                      showTime
                      value-format="YYYY-MM-DD HH:mm:ss"
                      placeholder="请选择结束时间"
                      v-model:value="queryParam.createTime_end"
                      class="query-group-cust"
                    />
                  </a-form-item>
                </div>
              </a-form-item>
            </a-col>
          </template>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
              <a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
              <a @click="toggleSearchStatus = !toggleSearchStatus" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <Icon :icon="toggleSearchStatus ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" />
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="chart-container">
      <a-space wrap block direction="vertical" style="width: 100%">
        <!-- 顶部基础数据渲染 -->
        <template v-for="(chartRow, index) in testData">
          <a-row :gutter="[10, 10]" v-if="chartRow.length" :key="index">
            <a-col
              v-for="(item, i) in chartRow"
              :key="i"
              :xs="autoSpan[chartRow.length].xs"
              :sm="autoSpan[chartRow.length].sm"
              :md="autoSpan[chartRow.length].md"
              :lg="autoSpan[chartRow.length].lg"
              :xl="autoSpan[chartRow.length].xl"
              :xxl="autoSpan[chartRow.length].xxl"
            >
              <a-card>
                <component
                  :is="item.componentName"
                  :title="item.title ? item.title : ''"
                  :number="item?.number ?? 0"
                  :base="item?.base ?? undefined"
                  :direct="item?.direct ?? 'v'"
                  :data="item?.data ?? []"
                  :y-data="item?.yData ? item.yData : []"
                  :x-axis-category="item?.xAxisCategory ?? []"
                />
              </a-card>
            </a-col>
          </a-row>
        </template>
      </a-space>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { FormInstance } from 'ant-design-vue';
  import { ref, reactive } from 'vue';
  import BugTag from './chart-comp/bug-tag.vue';
  import BugPercent from './chart-comp/bug-percent.vue';
  import BugTime from './chart-comp/bug-time.vue';
  import ChartsTotal from './chart-comp/charts-total.vue';
  import BugTrude from './chart-comp/bug-trude.vue';
  import BugPie from './chart-comp/bug-pie.vue';
  import BugTreemap from './chart-comp/bug-treemap.vue';

  const formRef = ref<FormInstance>();
  const toggleSearchStatus = ref<boolean>(false); // 显示隐藏筛选项目
  const queryParam = reactive<any>({});
  const labelCol = reactive({
    xs: 20,
    sm: 20,
    xl: 20,
    xxl: 20,
  });
  const wrapperCol = reactive({
    xs: 4,
    sm: 4,
  });

  function dx() {
    xx().then(res=>{
      testData.value = res;
    })
  }
  // const labelCol = ref<any>({style: { width: '100px' }})
  // const wrapperCol = ref<any>({});
  // 图表的自动排列
  // 一层索引用于记录几个表格排成一列的情况
  const autoSpan = {
    1: {
      xs: 24,
      sm: 24,
      md: 24,
      lg: 24,
      xl: 24,
      xxl: 24,
    },
    2: {
      xs: 24,
      sm: 12,
      md: 12,
      lg: 12,
      xl: 12,
      xxl: 12,
    },
    3: {
      xs: 24,
      sm: 24,
      md: 12,
      lg: 8,
      xl: 8,
      xxl: 8,
    },
    4: {
      xs: 24,
      sm: 12,
      md: 12,
      lg: 6,
      xl: 6,
      xxl: 6,
    },
  };
  // 临时的测试数据 , 每行数据的合集
  type TestDataType = {
    componentName: typeof BugTag | typeof BugPercent | typeof BugTime | typeof ChartsTotal | typeof BugTrude | typeof BugPie | typeof BugTreemap;
    title: string;
    data?: { name: string; data?: number[]; value?: number; path?: string }[];
    direct?: 'v' | 'h';
    base?: number;
    number?: number;
    yData?: number[] | string[];
    xAxisCategory?: number[] | string[];
  }[][];
  const testData: TestDataType = [
    [
      // {
      //   componentName: 'BugTag',
      //   title: '有小缺陷',
      //   number: 108,
      //   yData: [200, 349],
      //   xAxisCategory: ['1yue', '2yue'],
      // },
      {
        componentName: 'BugTag',
        title: '未解决',
        number: 108,
        yData: [400, 349],
        xAxisCategory: ['1yue', '2yue'],
      },
      {
        componentName: 'BugTag',
        title: '遗留',
        number: 108,
        yData: [4, 349],
        xAxisCategory: ['1yue', '2yue'],
      },
      {
        componentName: 'BugTag',
        title: '智慧',
        number: 108,
        yData: [300, 349],
        xAxisCategory: ['1yue', '2yue'],
      },
    ],
    [
      {
        componentName: BugPercent,
        title: 'Bug解决率',
        number: 99,
        yData: [4, 5, 8, 2],
        xAxisCategory: ['1yue', '2yue', '3yue', '4yue'],
      },
      {
        componentName: BugPercent,
        title: 'Bug重启率',
        number: 99,
        yData: [4, 5, 8, 2],
        xAxisCategory: ['1yue', '2yue', '3yue', '4yue'],
      },
    ],
    [
      {
        componentName: BugTime,
        title: 'Bug平均解决时间',
        number: 35.53,
        base: 15.92,
      },
      {
        componentName: BugTime,
        title: 'Bug关闭时间',
        number: 43.79,
        base: 66.73,
      },
      {
        componentName: BugTime,
        title: 'Bug验证时长',
        number: 4.45,
        base: 9.22,
      },
    ],
    [
      {
        componentName: ChartsTotal,
        title: '投产遗留缺陷',
        direct: 'v',
        xAxisCategory: ['批次1', '批次2', '批次3', '批次4'],
        data: [
          {
            name: 'sit',
            data: [10, 20, 33, 4],
          },
          {
            name: 'uat',
            data: [5, 8, 0, 45],
          },
          {
            name: '准生产',
            data: [8, 3, 9, 6],
          },
        ],
      },
      {
        componentName: ChartsTotal,
        title: '有效缺陷提交人分布',
        direct: 'h',
        yData: ['张三', '李四', '王五', '找刘', '小气', '小吧', '老久'],
        data: [
          {
            name: 'p0',
            data: [10, 20, 33, 4, 4, 6, 23],
          },
          {
            name: 'p1',
            data: [5, 8, 0, 45, 33, 87, 9],
          },
          {
            name: 'p2',
            data: [8, 3, 9, 6, 4, 9, 90],
          },
        ],
      },
      {
        componentName: ChartsTotal,
        title: '有效缺陷解决人分布',
        direct: 'h',
        yData: ['张三', '李四', '王五', '找刘', '小气', '小吧', '老久'],
        data: [
          {
            name: 'p0',
            data: [10, 20, 33, 4, 4, 6, 23],
          },
          {
            name: 'p1',
            data: [5, 8, 0, 45, 33, 87, 9],
          },
          {
            name: 'p2',
            data: [8, 3, 9, 6, 4, 9, 90],
          },
        ],
      },
    ],
    [
      {
        componentName: BugTrude,
        title: '缺陷收敛趋势',
        data: [
          {
            name: '可复测',
            data: [10, 20, 33, 4, 4, 6, 23, 8, 0, 2, 12, 34],
          },
          {
            name: '提交',
            data: [5, 4, 3, 2, 59, 33, 2, 23, 0, 22, 12, 23],
          },
          {
            name: '已关闭',
            data: [50, 40, 30, 22, 22, 12, 14, 12, 12, 34, 1, 9],
          },
        ],
      },
    ],
    [
      {
        componentName: ChartsTotal,
        title: '各开发人员缺陷状态分布',
        direct: 'h',
        yData: ['张三', '李四', '王五', '找刘', '小气', '小吧', '老久'],
        data: [
          {
            name: '新建',
            data: [10, 20, 33, 4, 4, 6, 23],
          },
          {
            name: '已分派',
            data: [5, 8, 0, 45, 33, 87, 9],
          },
          {
            name: '重新打开',
            data: [8, 3, 9, 6, 4, 9, 90],
          },
          {
            name: '已驳回',
            data: [8, 3, 9, 6, 4, 9, 90],
          },
          {
            name: '已关闭',
            data: [8, 3, 9, 6, 4, 9, 90],
          },
          {
            name: '遗留',
            data: [8, 3, 9, 6, 4, 9, 90],
          },
          {
            name: '遗留关闭',
            data: [8, 3, 9, 6, 4, 9, 90],
          },
          {
            name: '挂起',
            data: [8, 3, 9, 6, 4, 9, 90],
          },
          {
            name: '可复测',
            data: [8, 3, 9, 6, 4, 9, 90],
          },
        ],
      },
      {
        componentName: ChartsTotal,
        title: '各测试人员缺陷状态分布',
        direct: 'h',
        yData: ['张三', '李四', '王五', '找刘', '小气', '小吧', '老久', '试试'],
        data: [
          {
            name: '新建',
            data: [10, 20, 33, 4, 4, 6, 23, 32],
          },
          {
            name: '已分派',
            data: [5, 8, 0, 45, 33, 87, 9, 9],
          },
          {
            name: '重新打开',
            data: [8, 3, 9, 6, 4, 9, 90, 32],
          },
          {
            name: '已驳回',
            data: [8, 3, 9, 6, 4, 9, 90, 23],
          },
          {
            name: '已关闭',
            data: [8, 3, 9, 6, 4, 9, 90, 44],
          },
          {
            name: '遗留',
            data: [8, 3, 9, 6, 4, 9, 90, 55],
          },
          {
            name: '遗留关闭',
            data: [8, 3, 9, 6, 4, 9, 90, 5],
          },
          {
            name: '挂起',
            data: [8, 3, 9, 6, 4, 9, 90, 4],
          },
          {
            name: '可复测',
            data: [8, 3, 9, 6, 4, 9, 90, 12],
          },
        ],
      },
    ],
    [
      {
        componentName: BugPie,
        title: '缺陷优先级分布',
        data: [
          {
            name: '章三',
            value: 30,
          },
          {
            name: '李四',
            value: 20,
          },
          {
            name: 'wang5',
            value: 50,
          },
          {
            name: '小刘',
            value: 12,
          },
        ],
      },
      {
        componentName: BugPie,
        title: '缺陷状态分布',
        data: [
          {
            name: '章三',
            value: 30,
          },
          {
            name: '李四',
            value: 20,
          },
          {
            name: 'wang5',
            value: 50,
          },
          {
            name: '小刘',
            value: 12,
          },
        ],
      },
      {
        componentName: BugTreemap,
        title: '各开发人员缺陷状态分布',
        data: [
          {
            name: '开发设计',
            path: '开发设计',
            value: 200,
          },
          {
            name: '代码错误',
            path: '代码错误',
            value: 120,
          },
          {
            name: '版本问题',
            path: '版本问题',
            value: 56,
          },
          {
            name: '参数配置',
            path: '参数配置',
            value: 26,
          },
          {
            name: '环境问题',
            path: '环境问题',
            value: 16,
          },
          {
            name: '测试问题',
            path: '测试问题',
            value: 16,
          },
        ],
      },
    ],
  ];
  /**
   * 查询
   */
  function searchQuery() {
    // 请求接口
    // ---- TODO:待完善 -----
  }
  /**
   * 重置
   */
  function searchReset() {
    formRef.value?.resetFields();
    //刷新数据
    searchQuery();
  }
</script>

<style lang="less" scoped>
  @prefix-cls: ~'@{namespace}-basic-table';
  .jeecg-basic-table-form-container {
    padding: 0;
    .table-page-search-submitButtons {
      display: block;
      margin-bottom: 24px;
      white-space: nowrap;
    }
    .query-group-cust {
      min-width: 100px !important;
    }
    .query-group-split-cust {
      width: 30px;
      display: inline-block;
      text-align: center;
    }
  }
  .chart-container {
    padding: 10px;
  }
  .@{prefix-cls} {
    max-width: 100%;

    &-row__striped {
      td {
        background-color: @app-content-background;
      }
    }

    &-form-container {
      padding: 10px;

      .ant-form {
        padding: 12px 10px 6px 10px;
        margin-bottom: 8px;
        background-color: @component-background;
        border-radius: 2px;
      }
    }

    .ant-tag {
      margin-right: 0;
    }

    //update-begin-author:liusq---date:20230517--for: [issues/526]RangePicker 设置预设范围按钮样式问题---
    .ant-picker-preset {
      .ant-tag {
        margin-right: 8px !important;
      }
    }
    //update-end-author:liusq---date:20230517--for: [issues/526]RangePicker 设置预设范围按钮样式问题---

    .ant-table-wrapper {
      padding: 6px;
      background-color: @component-background;
      border-radius: 2px;

      .ant-table-title {
        min-height: 40px;
        padding: 0 0 8px 0 !important;
      }

      .ant-table.ant-table-bordered .ant-table-title {
        border: none !important;
      }
    }

    .ant-table {
      width: 100%;
      overflow-x: hidden;

      &-title {
        display: flex;
        padding: 8px 6px;
        border-bottom: none;
        justify-content: space-between;
        align-items: center;
      }
      //定义行颜色
      .trcolor {
        background-color: rgba(255, 192, 203, 0.31);
        color: red;
      }

      //.ant-table-tbody > tr.ant-table-row-selected td {
      //background-color: fade(@primary-color, 8%) !important;
      //}
    }

    .ant-pagination {
      margin: 10px 0 0 0;
    }

    .ant-table-footer {
      padding: 0;

      .ant-table-wrapper {
        padding: 0;
      }

      table {
        border: none !important;
      }

      .ant-table-content {
        overflow-x: hidden !important;
        //  overflow-y: scroll !important;
      }

      td {
        padding: 12px 8px;
      }
    }
    //表格选择工具栏样式
    .alert {
      height: 38px;
      // background-color: #e6f7ff;
      // border-color: #91d5ff;
    }
    &--inset {
      .ant-table-wrapper {
        padding: 0;
      }
    }
    // ------ 统一设置表格列最大宽度 ------

    // update-begin--author:sunjianlei---date:220230718---for：【issues/622】修复表尾合计错位的问题
    &--show-summary {
      .ant-table > .ant-table-footer {
        padding: 12px 0 0;
      }

      .ant-table.ant-table-bordered > .ant-table-footer {
        border: 0;
      }
    }
    // update-end--author:sunjianlei---date:220230718---for：【issues/622】修复表尾合计错位的问题
  }
</style>
